.normal {
  background: #79e4f2;
}

.element {
  color: blue; // 被前面更 specific rule 覆盖
  font-size: 24px;
  // css modules 支持上下文
  .context > & {
    color: red;
  }
  // 同时设置两个类才有的样式，附加类调整主类样式
  &.modifier {
    border: 1px solid green;
  }
}

// 结合 less 能力将 media query 放到嵌套内部，逻辑更清晰
.bgc2 {
  @media only screen and (max-width: 500px) {
    background-color: lightblue;
  }
  @media only screen and (min-width: 500px) {
    background-color: darkblue;
  }
}

@keyframes mymove {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(50%);
  }
}

// 可以模块化动画 keyframe
.aniMove {
  // animation-name: mymove; // ok, use local animation definition
  // animation-name: compose mymove1 from './m1.module.less'; // fail
  // composes: mymove from './m1.module.less'; // fail
  composes: aniMyMove from './m1.module.less';
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}
